<template>
    <div class="container">
        <div class="container_head">
            <el-row :gutter="20">
                <el-col :span="6">
                    <h3 class="myH3">班级</h3>
                </el-col>
                <el-col :span="18">
                    <el-input placeholder="请输入搜索内容" suffix-icon="el-icon-search"
                              @keyup.enter.native="search" class="sousuo">
                        <el-button slot="append" icon="el-icon-search" @click="search">搜索</el-button>
                    </el-input>
                </el-col>
            </el-row>
        </div>
        <div class="container_body" v-for="(classes,index) in classesList" :key="index">
            <el-row>
                <el-col :span="8">
                    <div>
                        <img src="img/5.jpg" style="height: 170px;">
                    </div>
                </el-col>
                <el-col :span="8">
                    <div style="margin-top: 50px">
                        <h3>{{ classes.className }}</h3>
                        <h4 style="color: #606266">学生：{{ classes.totalStudent }}人</h4>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div style="margin-top: 50px">
                        <el-button type="primary" icon="el-icon-edit" round  @click="toCourse(classes)">继续备课</el-button>
<!--                      <el-button type="primary" round>主要按钮</el-button>-->
                    </div>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script>
    export default {
        name: "CourseList",
        data() {
            return {
                courseName: '',
                //班级数组
                classesList: [],
                user: JSON.parse(window.localStorage.getItem('user')),
            }
        },
        methods: {
            //跳转课程详情页面
            toCourse(classes) {
                this.$router.push({
                    path: '/courseDirectory',
                    query: {
                        classes:classes
                    }
                })
            }
        },
        created() {
            const _this = this;
            //获取教师的所有班级
            axios.get("http://localhost:8080/classStuDetail/findClassByTeacherId?teacherId=" + _this.user.userId).then(function (res) {
                _this.classesList = res.data.data;
                console.log("教师所有班级");
                console.log(_this.classesList);
            })
        }
    }
</script>

<style scoped>
    .container_head {

    }

    .container_body {
        /*box-shadow: 0 10px 60px 0 rgb(69, 176, 255);*/
        /*text-align: center;*/
        height: 170px;
        width: 72%;
        margin-left: 180px;
        background-color: white;
        padding: 20px;
        shadow: hover;
        margin-bottom: 20px;
        color: black;
    }

    .container_body:hover {
        box-shadow: 0 2px 30px rgb(69, 176, 255);
    }

    .sousuo {
        width: 250px;
        margin-left: 500px;
        margin-top: 12px
    }
</style>